import React from 'react'

class DeepChild extends React.Component {
  timerId = null
  // 执行时机：组件从页面中消失的时候执行（值得是组件结果都被挪除了），卸载
  componentWillUnmount() {
    // 在这里一般做一些清理工作（清除定时器,清理事件监听）
    console.log('componentWillUnmount')
    // clearInterval(this.timerId)
    window.removeEventListener('resize', this.handleResize)
  }
  handleResize = () => {
    console.log('窗口大小正在改变')
  }
  componentDidMount() {
    // this.timerId = setInterval(() => {
    //   console.log('定时器正在执行')
    // }, 1000)
    window.addEventListener('resize', this.handleResize)
  }
  render() {
    return <div>我是子组件DeepChild</div>
  }
}

class Child extends React.Component {
  state = {
    num: 0,
  }

  handleClick = () => {
    this.setState({
      num: this.state.num + 1,
    })
  }
  render() {
    return (
      <>
        <h2>{this.state.num}</h2>
        <button onClick={this.handleClick}>点击我+1</button>
        {this.state.num <= 3 ? (
          <DeepChild></DeepChild>
        ) : (
          <p>DeepChild已经被卸载了</p>
        )}
      </>
    )
  }
}
export default class App extends React.Component {
  render() {
    return (
      <>
        <Child></Child>
      </>
    )
  }
}
